<template>
  <div class="address">
    <van-nav-bar
      style="height: 46px; font-size: 12px"
      title="常用地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-address-list
      :list="message"
      v-model="chosenAddressId"
      @add="onAdd = true"
      @edit="onEdit"
    />
    <van-action-sheet v-model="onAdd" title="新增地址">
      <div class="onAddress">
        <van-form>
          <van-field
            v-model="form.username"
            name="姓名"
            label="姓名"
            placeholder="请填写收货人姓名"
            :rules="[
              {
                required: true,
                message: '姓名不能为空',
              },
            ]"
          />

          <van-field
            v-model="form.telephone"
            name="电话"
            label="电话"
            placeholder="请输入正确的联系电话"
            :rules="[
              {
                required: true,
                message: '联系电话不能为空',
              },
            ]"
          />
          <van-field
            v-model="form.address"
            name="详细地址"
            label="详细地址"
            placeholder="请输入详细地址"
            :rules="[
              {
                required: true,
                message: '请输入详细地址',
              },
            ]"
          />
          <van-field
            v-model="chooseValue"
            is-link
            readonly
            label="地址"
            placeholder="请选择所在省市区"
            @click="showAddrPopup = true"
          />
          <van-popup v-model="showAddrPopup" position="bottom">
            <van-area
              title="标题"
              :area-list="areaList"
              @cancel="showAddrPopup = false"
              :columns-placeholder="['请选择', '请选择', '请选择']"
              @confirm="confArea"
            />
          </van-popup>

          <div style="margin: 16px">
            <van-button round block type="info" @click="onSubmit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import Vue from "vue";
import { get, post } from "@/http/axios";
import { AddressList } from "vant";
import { ActionSheet } from "vant";
import { areaList } from "@vant/area-data";
import { Area } from "vant";
Vue.use(ActionSheet);
Vue.use(AddressList);
export default {
  data() {
    return {
      addressData: [],
      chosenAddressId: 1,
      message: [],
      onAdd: false,
      form: {
        username: "",
        telephone: "",
        province: "",
        city: "",
        area: "",
        address: "",
      },
      showAddrPopup: false,
      areaList,
      chooseValue: "",
    };
  },
  methods: {
    async getAllAddressData() {
      let data = {
        page: 1,
        pageSize: 10,
      };
      let res = await get("/address/pageQuery", data);
      this.addressData = res.data.data.list;
      for (let index = 0; index < this.addressData.length; index++) {
        const element = this.addressData[index];
        let a = {};
        this.message.push(a);
        a.id = element.id;
        a.name = element.username;
        a.tel = element.telephone;
        a.address =
          element.province + element.city + element.area + element.address;
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    areaChoose() {
      this.showAddrPopup = true;
    },
    confArea(data) {
      // this.chooseArea = data;
        console.log(data);
      for (let i = 0; i < data.length; i++) {
        this.chooseValue = data[i].name + this.chooseValue;
      }
      this.form.province = data[0].name;
      this.form.city = data[1].name;
      this.form.area = data[2].name;
      this.showAddrPopup = false;
    },
    async onSubmit() {
        let res = await post("/address/saveOrUpdate", this.form);
        console.log(res);
        this.onAdd = false;
        this.getAllAddressData();
    },
    onEdit() {},
  },
  created() {
    this.getAllAddressData();
    console.log(this.areaList);
  },
};
</script>

<style scoped>
</style>